<script setup>
import { ref } from 'vue'
import NodeSave from './dialog/save'
import columns from '@/config/columns/node'
import { toTreeData } from '@/utils/util-array'
import ConfirmButton from '@/components/plug-in/confirm-button'

const tablePros = ref()

let saveForm = ref({})
let saveShow = ref(false)
let parentMenu = ref([])

const saveDataShow = (record) => {
  saveForm.value = record
  saveShow.value = true
}
const reload = () => {
  tablePros.value.reload()
}

const tableOpen = (open) => {
  tablePros.value.expanded(open)
}

const parseData = (list) => {
  let menu = []
  list.forEach(res => {
    if (Number(res.NodeType) === 1) {
      menu.push({
        value: res.NodeID,
        parentId: res.ParentID,
        title: res.NodeName,
      })
    }
  })
  parentMenu.value = toTreeData({ data: menu, idField: 'value' })
  return toTreeData({ data: list, idField: 'NodeID', parentIdField: 'ParentID' })
}
</script>

<template>
  <div class="wrapper">
    <node-save :form="saveForm" v-model:visible="saveShow" :parent-menu="parentMenu" @complete="reload"/>

    <table-pro url="/node" ref="tablePros" rowKey="NodeID" :parse-data="parseData" :columns="columns">
      <template v-slot:search>
        <icon-btn @click="saveDataShow(false)"></icon-btn>
        <a-button type="dashed" @click="tableOpen(true)">全部展开</a-button>
        <a-button type="dashed" @click="tableOpen(false)">折叠全部</a-button>
      </template>
      <template v-slot="{ column, record}">
        <template v-if="column.dataIndex === 'NodeName'">
          <i v-if="record.NodeIcon" :class="record.NodeIcon"/>
          {{ record.NodeName }}
        </template>
        <template v-if="column.dataIndex === 'NodeType'">
          <a-tag :color="Number(record.NodeType) ===1 ? 'processing' : 'default'">
            {{ Number(record.NodeType) === 1 ? '菜单' : '按钮' }}
          </a-tag>
        </template>
        <template v-if="column.dataIndex === 'Action'">
          <link-btn title="编辑" @click="saveDataShow(record)"></link-btn>
          <confirm-button
              :status="Number(record.NodeStatus)"
              :params="{ID: record.NodeID}"
              request-path="/node/status"
              @request-success="reload()"/>
        </template>
      </template>
    </table-pro>
  </div>
</template>
